<template>
    <div>
      <Card class="search-condition">
        <Form ref="model" :model="param" inline :label-width="100">
          <Row>
            <Col span="8">
              <FormItem prop="ossGameId" style="width:100%;" label="赛事编号">
                <Select v-model="param.ossGameId" placeholder="请选择" clearable style="width: 200px">
                  <Option v-for="(_item,index) in OSSArr" :key="index" :value="_item.key">{{_item.value}}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem prop="sectionId" style="width:100%;" label="赛事阶段">
                <Select v-model="param.sectionId" placeholder="请选择" clearable style="width: 200px">
                  <Option v-for="(_item,index) in sectionArr" :key="index" :value="_item.key">{{_item.value}}</Option>
                </Select>
               </FormItem>
            </Col>
            <Col span="8">
              <FormItem prop="groupId" style="width:100%;" label="赛事分组">
                <Select v-model="param.groupId" placeholder="请选择" clearable style="width: 200px">
                  <Option v-for="(_item,index) in groupArr" :key="index" :value="_item.key">{{_item.value}}</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
              <FormItem prop="competitionId" style="width:100%;" label="赛事项目">
                <Select v-model="param.competitionId" placeholder="请选择" clearable style="width: 200px">
                  <Option v-for="(_item,index) in competitionArr" :key="index" :value="_item.key">{{_item.value}}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem prop="zoneId" style="width:100%;" label="赛区编号">
                <Select v-model="param.zoneId" placeholder="请选择" clearable style="width: 200px">
                  <Option v-for="(_item,index) in zoneArr" :key="index" :value="_item.key">{{_item.value}}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <div style="text-align: center">
                <Button @click="query" class="m-l-sm" type="primary" icon="md-search">筛选</Button>
                <Button @click="reset" class="m-l-sm" icon="md-sync">重置</Button>
              </div>
            </Col>
          </Row>

        </Form>
      </Card>
      <Card class="m-t-sm">
        <Row>
          <Table :loading="loading" stripe border :columns="tableColumns" :data="tableData"></Table>
          <page-temp :total="total" :current="param.pageNo" :size="param.pageSize" @changePage='changePage'></page-temp>
        </Row>
      </Card>
    </div>
</template>
<script>
  import Api from "@/api/public-golf";
  import {OSSArr,sectionArr,groupArr,competitionArr,zoneArr}from '@/libs/util.js'
  const api = new Api();
    export default {
        data() {
            return {
              loading:false,
              param:{
                pageNo:1,
                pageSize:10,
                zoneId:'',
                ossGameId:'',
                competitionId:'',
                groupId:'',
                sectionId:''
              },
              total:0,
              tableColumns:[
                {
                  title: "名次",
                  key: "ranking",
                },
                {
                  title:'姓名',
                  key:'playerName',
                },
                {
                  title:'手机号码',
                  key:'playerPhone',
                  width:120
                },
                {
                  title: "运动员编号",
                  key: "ossPlayerId",
                },

                {
                  title:'赛事分组',
                  key:'groupId',
                  render: (h, params) => {
                    return h('span',this.findValue(groupArr,params.row.groupId))
                  },
                },
                {
                  title:'赛事编号',
                  key:'ossGameId',
                  render: (h, params) => {
                    return h('span',this.findValue(OSSArr,params.row.ossGameId))
                  },
                },
                {
                  title:'赛事阶段',
                  key:'sectionId',
                  render: (h, params) => {
                    return h('span',this.findValue(sectionArr,params.row.sectionId))
                  },
                },
                {
                  title:'赛区编号',
                  key:'zoneId',
                  render: (h, params) => {
                    return h('span',this.findValue(zoneArr,params.row.zoneId))
                  },
                },
                {
                  title:'赛事项目',
                  key:'competitionId',
                  render: (h, params) => {
                    return h('span',this.findValue(competitionArr,params.row.competitionId))
                  },
                },
                {
                  title: "成绩单位",
                  key: "scoreUnit",
                  width:70
                },
                {
                  title: "最好成绩",
                  key: "bestScore",
                },
                {
                  title: "同步日期",
                  key: "day",
                  width:100
                },
                {
                  title: "备注",
                  key: "remark",
                }
              ],
              tableData:[],
              OSSArr:OSSArr,
              sectionArr:sectionArr,
              groupArr:groupArr,
              competitionArr:competitionArr,
              zoneArr:zoneArr,
            }
        },
        watch: {},
        computed: {},
        created() {
          this.query()
        },
        methods: {
          query(){
            this.loading = true;
            api.rankList(this.param)
              .then(res => {
                this.loading = false;
                this.tableData = res.list;
                this.total = res.count
              })
          },
          // 分页
          changePage(pageNum) {
            this.param.pageNo = pageNum;
            this.query();
          },
          reset() {
            this.$refs.model.resetFields();
            this.query()
          },
          findValue(arr,key) {
            let result = arr.find(x => x.key === key).value;
            return result
          }
        }
    };
</script>
<style scoped>

</style>
